<template>
  <div class="container">
    <!-- <h2>设备管理</h2> -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline" size="medium">
        <el-form-item label="设备编号：">
          <el-input v-model="queryObj.innerCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" class="searchBtn" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="btns">
        <el-button type="primary" icon="el-icon-circle-plus-outline" class="left" @click="openAdd">新建</el-button>
        <el-button type="primary" class="right" @click="openLargeStraDialog">批量操作</el-button>
      </div>
      <!-- 表格区域 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @select="largeStraMsg"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          width="80"
          prop="id"
        />
        <el-table-column
          label="设备编号"
          width="170"
          prop="innerCode"
        />
        <el-table-column
          label="设备型号"
          width="168"
          prop="type.name"
        />
        <el-table-column
          label="详细地址"
          width="168"
          show-overflow-tooltip
          prop="node.name"
        />
        <el-table-column
          label="合作商"
          width="168"
          prop="ownerName"
        />
        <el-table-column
          label="设备状态"
          width="168"
          prop="vmStatus"
        >
          <template #default="{row}">
            <span>{{ row.vmStatus?row.vmStatus===1?'运营': '撤机' : '未投放' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150"
        >
          <template #default="{row}">
            <el-button type="text" @click="openouter(row)">货道</el-button>
            <el-button type="text" @click="openStrategyDialog(row.innerCode)">策略</el-button>
            <el-button type="text" @click="openEditDialog(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区域 -->
      <!-- 分页区域 -->
      <el-pagination
        :current-page="queryObj.pageIndex"
        :page-size="queryObj.pageSize"
        popper-class="selectPagesize"
        layout="slot, prev,  next"
        background
        prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template>
          <span class="pagnation">共{{ totalCount }}条记录 第{{ queryObj.pageIndex }}/{{ totalPage }}页</span>
        </template>
      </el-pagination>
      <!-- 分页区域 -->

      <!-- 货道弹窗部分 -->
      <el-dialog title="货道设置" :visible.sync="outerVisible" width="74%">
        <innerDialog
          :inner-visible.sync="innerVisible"
          :title="innerTitle"
          :choose-pro-list="chooseProList"
          @toNextPage="toNextPage"
          @toPrevPage="toPrevPage"
          @replacePro="replacePro"
        />

        <div class="topMessage">
          <div class="row"><span>货道行数：6</span></div>
          <div class="col"><span>货道列数：10</span></div>
          <div class="box"><span>货道容量（个）：10</span></div>
          <div class="sortPro"><el-button class="btn" type="primary">智能排货</el-button></div>
        </div>
        <div class="main">
          <div class="prev "><span class="el-icon-arrow-left" @click="flag = false" /></div>
          <div class="box">
            <ul class="content" :class="{toright:flag , toleft:!flag}">
              <li v-for="item in outerDialogMsg" :key="item.channelId">
                <div class="top">
                  <img v-if="item.sku" :src="item.sku.skuImage" alt="">
                  <img v-else src="" alt="">
                  <div v-if="item.sku" class="proName">{{ item.sku.brandName }}</div>
                  <div v-else class="proName">暂无商品</div>
                </div>
                <div class="bottom">
                  <el-button type="text" class="left" @click="openInnerDialog">添加</el-button>
                  <el-button type="text" class="right">删除</el-button>
                </div>
                <div class="label">{{ item.channelCode }}</div>
              </li>
            </ul>
          </div>
          <div class="next" @click="flag = true"><span class="el-icon-arrow-right" /></div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="innerVisible = true">确认</el-button>
        </div>
      </el-dialog>
      <!-- 货道弹窗部分 -->

      <!-- 策略管理弹窗部分 -->
      <el-dialog
        class="strategyDialog"
        title="策略管理"
        :visible.sync="strategyDialog"
        width="45%"
      >
        <!-- 信息 -->
        <el-form ref="form" class="strategyForm" :model="strategyForm" label-width="140px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="机器编号：">
                <span>{{ strategyForm.innerCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="策略名称：">
                <span>{{ strategyForm.policyName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="策略方案：">
                <span>{{ strategyForm.discount }}%</span>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <!-- 信息 -->
        <template #footer>
          <div class="footer" style="text-align: center">
            <el-button type="danger" style="color:#655b56;border:none" plain @click="strategyDialog = false">取消策略</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 策略管理弹窗部分 -->

      <!-- 修改弹窗部分 -->
      <el-dialog
        title="修改设备"
        :visible.sync="editDialog"
        width="46%"
        class="editDialog"
      >
        <el-form ref="form" :model="editForm" label-width="140px">
          <el-form-item label="机器编号：">
            <div>{{ editForm.innerCode }}</div>
          </el-form-item>
          <el-form-item label="供货时间：">
            <div>{{ editForm.lastSupplyTime }}</div>
          </el-form-item>
          <el-form-item label="设备类型：">
            <div>{{ editForm.type.name }}</div>
          </el-form-item>
          <el-form-item label="设备容量：">
            <div>{{ editForm.type.channelMaxCapacity }}</div>
          </el-form-item>
          <el-form-item label="设备点位：">
            <el-select :value="editForm.node.id" @change="changeNode">
              <el-option
                v-for="item in editDialogOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="合作商：">
            <div>{{ editForm.ownerName }}</div>
          </el-form-item>
          <el-form-item label="所属区域：">
            <div>{{ editForm.region.name }}</div>
          </el-form-item>
          <el-form-item label="设备地址：">
            <div>{{ editForm.node.addr }}</div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="editDialog-footer">
            <el-button @click="closeEdit">取 消</el-button>
            <el-button type="primary" @click="submitEdit">确 定</el-button>
          </div>

        </template>
      </el-dialog>
      <!-- 修改弹窗部分 -->

      <!-- 新增设备弹窗 -->
      <el-dialog
        title="新增设备"
        :visible.sync="addDialog"
        width="45%"
      >
        <el-form ref="addForm" :model="addForm" label-width="140px" :rules="addRules">
          <el-form-item label="设备编号：">
            <div>系统自动生成</div>
          </el-form-item>
          <el-form-item label="选择型号：" prop="vmType">
            <el-select v-model="addForm.vmType">
              <el-option
                v-for="item in vmTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择点位：" prop="nodeId">
            <el-select v-model="addForm.nodeId">
              <el-option
                v-for="item in nodeIdOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取 消</el-button>
          <el-button type="primary" @click="addSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增设备弹窗 -->

      <!-- 批量策略管理弹窗部分 -->
      <el-dialog
        title="提示"
        :visible.sync="largeStraDialog"
        width="40%"
      >
        <el-form ref="largestraForm" label-width="140px" :rules="addRules">
          <el-form-item label="选择策略：">
            <el-select v-model="selectedStra">
              <el-option
                v-for="item in largestraOptions"
                :key="item.policyId"
                :label="item.policyName"
                :value="item.policyId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="largeStraDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitLargeStra">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 批量策略管理弹窗部分 -->

    </div>
  </div>
</template>

<script>
import { list, strategyList, equipmentNode, editEquipmentNode, addEquipment, largeStrategyList, editLargeStrategy, aisleList, aisleChooseList } from '@/api/equipments/equipment'
import { list as typeList } from '@/api/equipments/type'

import innerDialog from './components/innerDialog.vue'
export default {
  name: 'Dikedeguanli',
  components: {
    innerDialog
  },

  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      totalCount: null,
      totalPage: '',
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        status: null,
        innerCode: null
      },
      strategyDialog: false, // 策略管理弹窗开关

      strategyForm: {
        innerCode: '010006',
        policyName: '0.1折优惠',
        discount: 1
      },
      editDialog: false, // 修改弹窗开关
      editForm: {
        innerCode: '',
        lastSupplyTime: '',
        type: {
          name: '',
          channelMaxCapacity: ''
        },
        ownerName: '',
        region: {
          name: ''
        },
        node: {
          addr: '',
          name: ''
        }
      },
      editDialogOption: [], // 修改弹窗下拉框选项列表
      editQuery: {
        id: '', // 售货机id
        nodeId: ''// 点位id
      },
      addDialog: false, // 新增弹窗
      addForm: {
        vmType: '', // 类型
        nodeId: '', // 点位
        createUserId: '1'
      },
      vmTypeOptions: [],
      nodeIdOptions: [],
      addRules: {
        vmType: [
          { required: true, message: '请选择', trigger: 'change' }
        ], // 类型
        nodeId: [
          { required: true, message: '请选择', trigger: 'change' }
        ] // 点位
      },
      largeStraDialog: false, // 批量管理弹窗部分
      largestraOptions: [], // 渲染批量管理下拉框
      selectedStra: '',
      isSelected: null, // 判断有没有选择复选框
      outerVisible: false,
      innerVisible: false,
      flag: false, // 控制货道弹窗左右滑动
      outerDialogMsg: [],
      innerTitle: '选择商品',
      // 货道内层弹窗的渲染请求体
      innerQueryObj: {
        pageIndex: 1,
        pageSize: 10
      },
      chooseProList: {}

    }
  },
  watch: {
    innerQueryObj: {
      deep: true,
      handler() {
        this.openInnerDialog()
      }

    }
  },

  async created() {
    this.initTable()
  },

  methods: {
    async initTable() {
      const data = await list(this.queryObj)
      this.tableData = data.currentPageRecords
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
      // console.log(data)
    },
    // 当每页条数数据改变时触发
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      // 修改本地传参发请求的每页条数数据，以便发请求
      this.queryObj.pageSize = val
      // 改变每页数据条数时，将当前页初始化为1，在请求数据
      this.queryObj.pageIndex = 1
      this.initTable()
    },
    // 当当前页页数改变时触发
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      // 修改本地传参发请求的当前页数据，以便发请求
      this.queryObj.pageIndex = val
      this.initTable()
    },
    // 打开策略弹窗
    async openStrategyDialog(id) {
      const data = await strategyList(id)
      console.log(data)
      this.strategyForm = { ...data }
      this.strategyDialog = true
    },
    // 打开修改弹窗
    async openEditDialog(row) {
      this.editForm = { ...row }
      console.log(row)
      const { currentPageRecords } = await equipmentNode()
      const arr = currentPageRecords.map(item => {
        return { name: item.name, id: item.id }
      })
      this.editDialogOption = arr
      console.log(arr)
      this.editQuery.id = row.id
      this.editDialog = true
    },
    // 修改点位下拉框选项触发
    changeNode(value) {
      // console.log(value)
      this.editForm.node.id = value
      this.editQuery.nodeId = value
    },
    // 提交修改点位
    async submitEdit() {
      try {
        await editEquipmentNode(this.editQuery)
        this.$message.success('修改成功')
        this.initTable()
        this.editDialog = false
      } catch (error) {
        console.log(error)
      }
    },
    // 关闭修改弹窗，还原下拉框值
    closeEdit() {
      this.initTable()
      this.editDialog = false
    },
    // 搜素功能
    search() {
      this.initTable()
    },
    // 打开新增弹窗
    async openAdd() {
      const { currentPageRecords } = await equipmentNode()
      // console.log(currentPageRecords)
      const arr = currentPageRecords.map(item => {
        return { name: item.name, id: item.id }
      })
      this.nodeIdOptions = arr

      const { currentPageRecords: type } = await typeList()
      const arr1 = type.map(item => {
        return { name: item.name, id: item.typeId }
      })
      // console.log(arr1)
      this.vmTypeOptions = arr1

      this.addDialog = true
    },
    // 提交新增
    async addSubmit() {
      try {
        await addEquipment(this.addForm)
        this.$message.success('新增成功')
        this.initTable()
        this.addDialog = false
      } catch (error) {
        console.log(error)
      }
      this.$refs.addForm.resetFields()
    },
    // 表格多选框选择时的回调
    largeStraMsg(selection, row) {
      console.log(selection)
      // console.log(row)
      this.isSelected = selection
    },
    // 打开批量管理弹窗
    async openLargeStraDialog() {
      if (!this.isSelected) {
        this.$message.warning('请勾选售货机')
      } else {
        const data = await largeStrategyList()
        console.log(data)
        this.largestraOptions = data

        this.largeStraDialog = true
      }
    },
    // 提交批量修改策略待写
    async submitLargeStra() {
      const data = this.largestraOptions.find(item => {
        return item.policyId === this.selectedStra
      })
      // console.log(data)
      const res = await editLargeStrategy(data)
      console.log(res)
      this.$message.success('批量修改成功')
      this.largeStraDialog = false
      this.initTable()

      // this.$message.warning('演示系统不支持此操作')
    },
    // 打开外层货道弹窗
    async openouter(row) {
      const data = await aisleList(row.innerCode)
      console.log(data)
      this.outerDialogMsg = data
      this.outerVisible = true
    },
    // 打开内层货道弹窗选择商品
    async openInnerDialog() {
      const data = await aisleChooseList(this.innerQueryObj)
      console.log(data)
      this.chooseProList = data
      this.innerVisible = true
    },
    toNextPage() {
      this.innerQueryObj.pageIndex++
    },
    toPrevPage() {
      this.innerQueryObj.pageIndex--
    },
    replacePro(item) {
      console.log(item)
    }

  }
}
</script>

<style lang="scss" scoped>
.toright{
   transform: translateX(-830px);
   transition: all 1s
}
.toleft{
   transform: translateX(0px);
   transition: all 1s
 }

*{
  list-style: none;
  box-sizing: border-box;
}
.container{
  padding: 20px;
  .search{
  display: flex;
  align-items: center;
  height: 64px;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
  padding-top: 23px;
  .searchBtn{
    background-color: #5373e0;
  }
}
.content{
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  .btns{
    margin-bottom: 20px;
   .left{
   background:linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border:none ;
   }
   .right{
    background-color: #fbf4f0;
    border:none ;
    color: #655b56;
   }
  }
  .el-pagination{
    position: relative;
   display: flex;
   justify-content: end;
   padding: 32px 16px;
   height: 32px;
   align-items: center;
   ::v-deep .btn-prev{
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
   }
   ::v-deep .btn-next{
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
   }
   .pagnation{
    position: absolute;
    left: 0;
    font-size: 16px!important;
    color: #dbdfe5!important;
    font-weight: normal;
   }

   .strategyDialog{
    ::v-deep .strategyForm{
      // padding:  0 20px;
      color: #666;
      font-weight: normal;
    }
     .footer {
       text-align: center !important;
      }
   }
   ::v-deep .editDialog-footer{
    display: flex;
    justify-content: center;
   }

  }
  .topMessage{
    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 847px;
    height: 56px;
    background-color: #f3f6fb;
    color: #666;
    margin-bottom: 15px;
    .row{
      margin-left: 43px;
    }
    .col{
      margin-left: 55px;
    }
    .box{
      margin-left: 54px;
    }
    .sortPro{
      margin-left: 290px;
      .btn{
        background-color: #5f84ff;
      }
    }
  }
  .main{
    // background-color: #b2f764;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 385px;
    .prev , .next{
      width: 50px;
      // background-color: #ff9743;
      font-size: 50px;
      color: #000;
    cursor: pointer;
    }
     .box{
      width: 830px;
      height: 400px;
        min-height: 400px;
        overflow: scroll;
        &::-webkit-scrollbar{
          display: none;
        }
      .content{
      width: 1682px;
      display: flex;
      flex-wrap: wrap;
      li{
        position: relative;
        width: 165px;
        height: 180px;
        padding-right: 8px;
        padding-bottom: 8px;
        padding-bottom: 0;
        // background-color: #cf77f7;
        &:nth-child(10n){
          padding: 0;
        }
        .top{
          width: 100%;
          padding-top: 16px;
          height: 135px;
          background-color: #f6f7fb;
          text-align: center;
          img{
            width: 84px;
            height: 78px;
            margin-bottom: 10px;
          }
        }
        .bottom{
          text-align: center;
          .left{
            color: #5f84ff;
          }
          .right{
            color: #ff5a5a;
          }
        }
        .label{
          position: absolute;
          top: 10px;
          left: 0;
          width: 43px;
          height: 23px;
          line-height: 23px;
          background: #829bed;
          border-radius: 0 10px 10px 0;
          font-size: 12px;
          color: #fff;
          text-align: center;
        }
      }
    }
     }

  }

}
}
</style>
